<template>
  <div class="manage">
    <div class="manage-mark">
      <div class="manage-group">
        <my-select ph="全部客服组" width="160" :items="kefuGroup"></my-select>
      </div>

      <div class="manage-message">
        <my-search ph="客服昵称/姓名/工号/手机号码" width="276"></my-search>
      </div>

      <div class="manage-kefu">
        <div class="manage-kefu1">
          <my-button :color="true">添加客服</my-button>
        </div>

        <div class="manage-kefu2">
          <my-button>批量操作</my-button>
        </div>

        <div class="manage-kefu3">
          <my-button>导出当前数据</my-button>
        </div>
      </div>
    </div>

    <div class="manage-table">
      <base-table
        :mytitle="title"
        :mydata="mydata"
        checkbox="true"
        type="kfgl"
      ></base-table>
    </div>

    <div class="pages">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, prev, pager, next, sizes, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import MySelect from "@/components/MyInput/MySelect";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
import BaseTable from "@/components/MyTable/BaseTable";

export default {
  props: ["type"],
  components: {
    MySelect,
    MySearch,
    MyButton,
    BaseTable,
  },
  data() {
    return {
      title: [
        {
          name: "ID",
          prop: "a",
          width: 118,
        },
        {
          name: "账号",
          prop: "b",
          width: 118,
        },
        {
          name: "客服昵称",
          prop: "c",
          width: 118,
        },
        {
          name: "客服姓名",
          prop: "d",
          width: 118,
        },
        {
          name: "客服分组",
          prop: "e",
          width: 118,
        },
        {
          name: "客服角色",
          prop: "f",
          width: 118,
        },
        {
          name: "客服状态",
          prop: "g",
          width: 118,
        }
      ],
      mydata: [
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
        {
          a: "1253",
          b: "116789@163.com",
          c: "小美",
          d: "杜薇",
          e: "客服组一",
          f: "工单客服",
          g: true,
        },
      ],
      kefuGroup: [
        {
          label: "全部客服",
          value: 0,
        },
        {
          label: "客服组一",
          value: 1,
        },
        {
          label: "客服组二",
          value: 2,
        },

        {
          label: "客服组三",
          value: 3,
        },
      ],
    };
  },
};
</script>

<style>
.manage {
  /* display: flex; */
  width: 1040px;
  height: 970px;
  background-color: #fff;
}
.manage-mark {
  display: flex;
}
.manage-kefu {
  display: flex;
  padding-top: 20px;
  padding-left: 205px;
}
.manage-group {
  padding-top: 20px;
  padding-left: 20px;
}
.manage-message {
  padding-top: 20px;
  padding-left: 20px;
}
.manage-kefu1 {
  padding-right: 10px;
}
.manage-kefu2 {
  padding-right: 10px;
}
.manage-table {
  padding-top: 20px;
  padding-left: 20px;
}
.pages {
  display: flex;
  padding-right: 21px;
}
</style>